<template>
  <div class="research-page">
    <div class="carousel-section animate-on-scroll">
      <!-- 原有轮播图模块（修改为卡片式轮播） -->
      <div class="carousel-section">
        <div class="research-direction">
          <div class="carousel-container">
            <!-- 核心修改：添加 type="card" 属性，调整高度适配卡片样式 -->
            <el-carousel type="card" height="450px" indicator-position="outside" :interval="4000">
              <el-carousel-item v-for="(item, index) in carouselItems" :key="index" @click="goTo(item.routepath)">
                <div class="carousel-item">
                  <img :src="item.image" :alt="item.title" />
                  <div class="carousel-text">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.description }}</p>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>

    <div class="hover-switch-section animate-on-scroll">
      <!-- 新增：研究方向悬停切换图片模块 -->
      <div class="hover-switch-section">
        <!-- 标题栏 -->
        <div class="section-title">
          <h2>研究方向</h2>
          <p class="title-eng">RESEARCH DIRECTION</p>
        </div>
        <!-- 核心交互区：左侧列表 + 右侧图片 -->
        <div class="switch-container">
          <!-- 左侧研究方向列表 -->
          <div class="direction-list">
            <div
              v-for="(dir, idx) in directionList"
              :key="idx"
              class="direction-item"
              @mouseenter="activeDir = idx"
              :class="{ active: activeDir === idx }"
            >
              <!-- 图标区：匹配研究方向的视觉符号 -->
              <div class="dir-icon">
                <i :class="dir.iconClass"></i>
              </div>
              <!-- 文字区 -->
              <span class="dir-name">{{ dir.name }}</span>
            </div>
          </div>
          <!-- 右侧图片展示区（带切换动画） -->
          <div class="image-container">
            <transition name="image-fade">
              <img
                :src="directionList[activeDir].image"
                :alt="directionList[activeDir].name"
                class="display-image"
                key="current-dir-image"
              />
            </transition>
          </div>
        </div>
      </div>
    </div>

    <Members />
    <ThesisCarousel />
    <AboutUs />
  </div>
</template>

<script>
import Members from '@/components/Members.vue'
import ThesisCarousel from '@/components/ThesisCarousel.vue';
import AboutUs from '@/components/AboutUs.vue';
export default {
  name: 'LabHome',
  components: {
    Members,
    ThesisCarousel,
    AboutUs
  },
  data() {
    return {
      // 原有轮播图数据（保持不变）
      carouselItems: [
        {
          image: require('@/assets/img/AI.jpeg'),
          title: '多模态大模型',
          description: 'Multimodal large model',
          routepath: '/researchDirection/bigModel'
        },
        {
          image: require('@/assets/img/recognition.jpeg'),
          title: '动作/行为识别',
          description: 'Action/behavior recognition',
          routepath: '/researchDirection/actionRecognition'
        },
        {
          image: require('@/assets/img/edge.jpeg'),
          title: '边缘计算',
          description: 'Edge Computing',
          routepath: '/researchDirection/edgeComputer'
        }
      ],
      // 新增：研究方向悬停数据（含图标、图片、跳转路径）
      directionList: [
        {
          name: '图像/视频处理与计算机视觉  ',
          iconClass: 'el-icon-picture', // 图像图标（Element UI内置）
          image: require('@/assets/img/feature1.jpeg'), // 需替换为实际图片路径
        },
        {
          name: '多模态大模型与深度学习',
          iconClass: 'el-icon-s-platform', // 相机图标（Element UI内置）
          image: require('@/assets/img/deepstudy.png'), // 需替换为实际图片路径
        },
        {
          name: '边缘计算与分布式计算',
          iconClass: 'el-icon-upload', // 灯泡图标（Element UI内置）
          image: require('@/assets/img/edge.jpeg'), // 需替换为实际图片路径
        },
        {
          name: '行为识别与视频理解分析',
          iconClass: 'el-icon-view', // 大脑图标（Element UI内置）
          image: require('@/assets/img/recognition.jpeg'), // 需替换为实际图片路径
        },
        {
          name: '大数据智能处理与分析',
          iconClass: 'el-icon-data-analysis', // 数据图标（Element UI内置）
          image: require('@/assets/img/bigdata1.png'), // 需替换为实际图片路径
        },
      ],
      // 新增：当前激活的研究方向索引（默认第一个）
      activeDir: 0
    }
  },
  methods: {
    // 原有轮播图跳转方法（保持不变）
    goTo(path) {
      this.$router.push(path);
    },
    // 新增：研究方向列表跳转方法（保持不变）
    goToDirPage(path) {
      this.$router.push(path);
    },
    // 新增：检查元素是否在视口内
    isInViewport(element) {
      const rect = element.getBoundingClientRect();
      return (
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.85 &&
        rect.bottom >= 0
      );
    },

    // 新增：处理滚动动画
    handleScrollAnimation() {
      const elements = document.querySelectorAll('.animate-on-scroll');
      elements.forEach(element => {
        if (this.isInViewport(element) && !element.classList.contains('animated')) {
          element.classList.add('animated');
        }
      });
    }
  },
  mounted() {
    // 初始检查一次
    this.handleScrollAnimation();
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScrollAnimation);
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('scroll', this.handleScrollAnimation);
  }
}
</script>
<style scoped>
/* 滚动滑入动画样式 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}
/* 卡片式轮播样式（替换原有轮播样式） */
.carousel-section {
  padding: 20px 0;
  background-color: #f8f9fa;
}
.research-direction {
  padding: 0;
  /* max-width: 1200px; */
  margin: 0 auto;
}
.carousel-container {
  margin-top: 0;
}
/* 卡片式轮播项核心样式 */
.el-carousel--card {
  width: 90%;
  margin: 0 auto; /* 居中显示 */
}
.el-carousel--card .el-carousel__item {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 轮播项内容样式适配卡片高度 */
.carousel-item {
  position: relative;
  width: 100%;
  height: 450px; /* 与轮播组件height一致 */
  cursor: pointer;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 文字叠加层适配卡片样式 */
.carousel-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(166, 78, 190, 0.986));
  color: white;
  padding: 20px 16px;
  text-align: center;
  /* 添加以下属性 */
  margin-top: 0; /* 确保没有额外的顶部边距 */
  z-index: 1; /* 确保文本层在图片之上 */
}

.carousel-text h2 {
  margin: 0 0 8px 0;
  font-size: 18px; /* 适配卡片高度缩小字体 */
}
.carousel-text p {
  margin: 0;
  /* padding-top: 20px; */
  font-size: 18px; /* 适配卡片高度缩小字体 */
  opacity: 0.9;
  font-weight: bold;
}
/* 卡片式轮播指示器样式（隐藏默认指示器，如需显示可调整） */
/* ::v-deep .el-carousel__indicators--outside {
  display: none;
} */
::v-deep .el-carousel__indicators--outside {
  display: block; /* 改为block以显示 */
  bottom: -40px; /* 调整位置 */
}

::v-deep .el-carousel__button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #6c2bd9; /* 自定义颜色 */
}
/* 卡片式轮播箭头样式优化 */
::v-deep .el-carousel--card .el-carousel__arrow {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  border: 1px solid #eee;
  opacity: 1;
  font-size: 18px;
  color: #666;
}
::v-deep .el-carousel__arrow:hover {
  background-color: #6c2bd9;
  color: white;
  border-color: #6c2bd9;
}
/* 卡片切换时的缩放效果优化 */
::v-deep .el-carousel--card .el-carousel__item:not(.is-active) {
  opacity: 0.8;
  transform: scale(0.92); /* 非激活卡片缩放效果 */
}
::v-deep .el-carousel--card .el-carousel__item.is-active {
  transform: scale(1); /* 激活卡片原尺寸 */
  z-index: 10;
}
/* 新增：研究方向悬停切换模块样式（保持不变） */
.hover-switch-section {
  padding: 20px 0;
  max-width: 1450px;
  margin: 0 auto;
  background-image: url("@/assets/img/background.jpg");
  border-radius: 20px;
}
/* 标题样式 */
.section-title {
  text-align: center;
  margin-bottom: 40px;
}
.section-title h2 {
  font-size: 32px;
  color: #fff;
  margin: 0 0 8px 0;
}
.title-eng {
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}
/* 核心交互区布局 */
.switch-container {
  display: flex;
  gap: 40px;
  align-items: center;
}
/* 左侧研究方向列表 */
.direction-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.direction-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 280px;
  margin-left: 80px;
  padding: 18px 24px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}
/* 激活/悬停状态 */
.direction-item:hover,
.direction-item.active {
  box-shadow: 0 4px 16px rgba(108, 43, 217, 0.1);
  border-left-color: #6c2bd9;
  transform: translateX(4px);
}
/* 图标样式 */
.dir-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f0eafb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c2bd9;
  font-size: 20px;
}
/* 文字样式 */
.dir-name {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}
/* 右侧图片容器 */
.image-container {
  flex: 1.5;
  height: 500px;
  width: 250px;
  margin-right: 100px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
/* 图片样式 */
.display-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 图片切换动画 */
.image-fade-enter-active,
.image-fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.image-fade-enter-from,
.image-fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
/* 响应式适配（屏幕宽度<992px时垂直布局） */
@media (max-width: 992px) {
  .switch-container {
    flex-direction: column;
  }
  .direction-list {
    width: 100%;
    max-width: 400px;
  }
  .image-container {
    width: 100%;
    height: 320px;
  }
  /* 卡片轮播响应式适配 */
  .el-carousel--card {
    width: 95%;
  }
  .carousel-text h2 {
    font-size: 16px;
  }
  .carousel-text p {
    font-size: 12px;
  }
}
</style>